<!Doctype html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8"/>
    <title th:text="${courseName}"></title>
    <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{bootstrap/css/bootstrap-theme.min.css}" rel="stylesheet" />
    <link rel="shortcut icon"  href="favicon.ico">
    <script th:src="@{jquery-3.1.1.js}" type="text/javascript"></script>
    <script th:src="@{jquery.validate.js}" type="text/javascript"></script>
    <script th:src="@{messages_zh.js}"></script>
    <script th:src="@{bootstrap/js/bootstrap.min.js}"></script>

    <style>

        body{
            background-color: rgba(216,216,216,0.81);
        }
        .show{
            width:270px;
            height: 200px;
            margin: 5px 15px 10px 0;
            color: black;
            float: left;
            /*border: 2px solid red;*/
            /*border-radius:25px;*/
            background-image: url(showCourse.jpg);
        }
        .title{
            position:relative;
            top:10px;
            text-align: center;
            font-family: Monaco;
            font-size: large;
        }
        .content{
            position:relative;
            margin: 7px 0 0;
            text-align: left;
            font-family: Monaco;
            font-size: large
        }
        .foot{
            position:relative;
            height: 25px;
            font-family: Monaco;
            font-size: 20px;
        }
        .foot a:link { color: #28a4c9;font-size: 20px;}		/* 未被访问的链接 */
        .foot a:hover {color: #66afe9}	/* 鼠标指针移动到链接上 */
    </style>
    <script>
        $(function(){
            $("#banner li a:not(#drop)").mouseover(function(){
                $(this).css("color","black");
            });
        });
        $(function(){
            $("#banner li a:not(#drop)").mouseout(function(){
                $(this).css("color","white");
            });
        });
        $(function() {
            $(".show").mouseover(function () {
                //让当前得到焦点的文本框改变其背景色
                $(this).css("box-shadow", " 3px 3px 3px #888888 ");
                $(this).css("position","relative");
                $(this).css("top","-1px");
            });

            $(".show").mouseout(function () {
                //让当前得到焦点的文本框改变其背景色
                $(this).css("box-shadow", " 0 0");
                $(this).css("position","relative");
                $(this).css("top","1px");
            });
        });
    </script>
</head>





<body>
    <div class="container">
        <th:block th:include="/index :: header"></th:block>

        <div th:if="${ #lists.isEmpty(classrooms)}" style="font-size:x-large;font-family:华文彩云;color:blue">
        暂未开放任何课堂!
    </div>

        <div th:if="${not #lists.isEmpty(classrooms)}">
            <div th:each="classroom : ${classrooms}" class="show" >

                <div th:text="${classroom.number}+号课堂" class="title"></div>
                <div style="margin: 7px 0 0;padding: 1px;width: 270px;height: 140px">
                    <div><span class="glyphicon glyphicon-map-marker" style="color: rgb(0, 0, 0);"></span>
                    <span th:text=" '上课地点: '+${classroom.place}" class="content"></span></div>
                    <div><span class="glyphicon glyphicon-time" style="color: rgb(0, 0, 0);"></span>
                    <span th:text=" '上课时间: '+${classroom.time}" class="content"></span></div>
                    <div><span class="glyphicon glyphicon-list-alt" style="color: rgb(0, 0, 0);"></span>
                    <span th:text=" '已选/容量: '+${classroom.amount}+'/'+${classroom.capacity}" class="content"></span></div>
                </div>
                <div th:if= "${not ifJoin}" class="foot">
                    <a th:href="@{/Join(classroom=${classroom.number},cno=${course.courseID},page=${page})}" onclick="if(confirm('确定加入吗?')==false)return false;" id="join" style="color: rgba(10,12,204,0.82)">加入</a>
                </div>
                <div th:if= "${ifJoin}" class="foot">
                   已加入
                </div>
            </div>
        </div>
        <div style="font-size:x-large;font-family:华文彩云;color: green;clear: both" th:text="${message}">
        </div>
        <div style="font-size:large;font-family:InputMono;color: blue;clear: both">
            <a th:href="@{/Courses(pageNum=${page})}"> <<返回课程页 </a>
        </div>

    </div>

</body>
</html>